<template>
    <div class="flex">
        <div class="relative flex gap-10" @mouseleave="mouseIn(current)">
            <div v-for="(item, index) in tabar_list"
                class="tabar_item flex justify-center items-center py-2 w-24 z-2" style="color: #fff;"
                @mouseenter="mouseIn(index)" @click="clickItem(item, index)" ref="tabar_item">
                <div class="text">{{ item }}</div>
            </div>
            <div class="hover_div absolute  w-24 h-full top-0  transition-all " ref="hover_div">
                <div class="top_left z-2"></div>
                <div class="top_right z-2"></div>
                <div class="bottom_left z-2"></div>
                <div class="bottom_right z-2"></div>
            </div>
        </div>
    </div>

</template>

<script setup>
const emit = defineEmits(['clickTabar'])
const props = defineProps({
    current: Number
})
const tabar_list = ref(["HOME", "PROJECT", "BLOG","ABOUT"])
const hover_div = ref()
const tabar_item = ref()
let randomText = "wdwdaWEREFDGTHRTHUKTYKUT!548@#@!dgwuhw#!@16548@#!@$%^&1651"
onMounted(() => {
    mouseIn(props.current)
})
watch(
    () => props.current,
    (newVal) => {
        mouseIn(newVal)
    }
)
const clickItem = (item, index) => {
    emit('clickTabar', item, index)
}

function getRandomString(source, length) {
    return Array.from({ length }, () => source[Math.floor(Math.random() * source.length)]).join('');
}

const mouseIn = (index) => {
    hover_div.value.style.left = tabar_item.value[index].offsetLeft + 'px'
    let text = tabar_list.value[index]
    let timeMax = 0
    let timer = setInterval(() => {
        if (timeMax == 300) {
            clearInterval(timer)

            if (tabar_item.value[index]?.innerText)
                tabar_item.value[index].innerText = text

            return
        }

        if (tabar_item.value[index]?.innerText)
            tabar_item.value[index].innerText = getRandomString(randomText, text.length)

        timeMax += 50
    }, 50)
}

</script>
<style scoped>
.tabar_item {
    font-size: 1.2rem;
    font-weight: 600;
}

.tabar_item:hover {
    cursor: pointer;
    opacity: 0.7;
}

.hover_div {
    pointer-events: none;
    transition-duration: 300ms;
}

.top_left {
    position: absolute;
    width: 8%;
    height: 15%;
    top: 0;
    left: 0;
    border-left: 2px solid #fff;
    border-top: 2px solid #fff;
}

.top_right {
    position: absolute;
    width: 8%;
    height: 15%;
    top: 0;
    right: 0;
    border-right: 2px solid #fff;
    border-top: 2px solid #fff;
}

.bottom_left {
    position: absolute;
    width: 8%;
    height: 15%;
    bottom: 0;
    left: 0;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
}

.bottom_right {
    position: absolute;
    width: 8%;
    height: 15%;
    bottom: 0;
    right: 0;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
}
</style>